import * as React from "react";
import {Button, DatePicker, message} from "antd";
import SelectDevice from "../SelectDevice";
import moment from "moment";
import "./index.less";

const RangePicker:any= DatePicker.RangePicker;

export interface DtPowerConditionProps {
    chooseDevice: (device: DtPowerDevice) => any,
    query: (param: DtPowerParam) => any,
}

export interface DtPowerState {
}

export interface DtPowerDevice {
    deviceId: number | null,
    no: string | null,
    name: string | null,
    devAddr: string | null,
}

export interface DtPowerParam {
    deviceId: number | null,
    endTime: number | null,
    startTime: number | null,
}

class DtPowerCondition extends React.Component<DtPowerConditionProps, DtPowerState> {
    private device: DtPowerDevice = {
        deviceId: null,
        no: null,
        name: null,
        devAddr: null,
    };
    private param: DtPowerParam = {
        deviceId: null,
        endTime: null,
        startTime: null,
    };

    render() {
        return (
            <div className="dtPowerCondition">
                <div className="bare_body" style={{padding: 16, paddingTop: 0}}>
                    选择设备：
                    <SelectDevice
                        energyType="1"
                        style={{width: 120, marginRight: 15}}
                        onSelect={(device: any) => {
                            this.onDeviceChange(device);
                        }}
                    />
                    选择日期：
                    <div className="changeType_btn d_inlineFlex">
                        <RangePicker
                            onChange={(dates) => {
                                this.onDateChange(dates);
                            }}
                        />
                    </div>
                    <Button
                        type="primary"
                        className="l_distance"
                        onClick={() => {
                            this.query();
                        }}
                    >
                        查询
                    </Button>
                </div>
            </div>
        );
    }

    onDateChange(dates) {
        let start: number | null = null;
        let end: number | null = null;
        if (dates) {
            start = moment(dates[0]).startOf("day").valueOf();
            end = moment(dates[1]).endOf("day").valueOf();
        }
        this.param.startTime = start;
        this.param.endTime = end;
    }

    //选择设备
    onDeviceChange(device: any) {
        this.device = {
            deviceId: device.id,
            no: device.no,
            name: device.name,
            devAddr: device.devAddr
        };
        this.props.chooseDevice(this.device);
    }

    //查询
    query() {
        if (!this.device.deviceId) {
            message.info("请选择设备！");
            return;
        }
        if (!this.param.startTime || !this.param.endTime) {
            message.info("请选择时间！");
            return;
        }
        this.param.deviceId = this.device.deviceId;
        this.props.query(this.param);
    }
}

export default DtPowerCondition;